<template>
  <div id="echarts_line"></div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    draw() {
      let option = {
          title: {
          subtext: "早起率：%",
          top:-10,
        },
        grid: {
          top: "10%",
          bottom: "8%",
          right: "0%",
          left: "6%",
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            data: [4000, 2500, 2001, 4100, 2400, 3900, 1320],
            type: "line",
            smooth: true,
            showSymbol: false,
            areaStyle:{
              color:new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#c386e8",
                },
                {
                  offset: 0.5,
                  color: "rgba(232, 201, 245,0.1)",
                },
                {
                  offset: 1,
                  color: "rgba(232, 201, 245,0)",
                },
              ]),
            },
            lineStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#c386e8",
                },
                {
                  offset: 1,
                  color: "#c386e8",
                },
              ]),
              shadowColor: "rgba(234, 211, 245, 1)",
              shadowBlur: 10,
            },
            animationDuration: 2800,
            animationEasing: "cubicInOut",

          },
          {
            data: [1000, 2500, 4001, 2700, 4200, 2600, 4200],
            type: "line",
            smooth: true,
            showSymbol: false,
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#4ad9f0",
                },
                {
                  offset: 0.5,
                  color: "rgba(82, 218, 240,0.1)",
                },
                {
                  offset: 1,
                  color: "rgba(82, 218, 240,0)",
                },
              ])
            },
            lineStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#4ad9f0",
                },
                {
                  offset: 1,
                  color: "#4ad9f0",
                },
              ]),
              shadowColor: "rgba(169, 234, 244,1)",
              shadowBlur: 10,
            },
            animationDuration: 2800,
            animationEasing: "cubicInOut",
          },
        ],
      };
      let mychart = this.$echarts.init(document.getElementById("echarts_line"));
      mychart.setOption(option);
    },
  },
  mounted() {
    this.draw();
  },
};
</script>

<style>
#echarts_line {
  width: 100%;
  height: 300px;
}
</style>